<!DOCTYPE html>
<html lang="ZH-cn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Test</title>
  <link rel="stylesheet" href="./styles/default.css">
</head>

<body>
  <s-page>
    <main>
      <s-snackbar duration="0">
        <s-button slot="trigger">Show</s-button>
        <div>
          无论哪种形式，都会返回一个 MatSnackBarRef。它可以用来关闭快餐栏或在快餐栏关闭时接收通知。 对于只有一个操作的简单消息，当该动作被触发时，MatSnackBarRef 会暴露出一个 Observable。
          如果你要关闭一个用 openFromComponent 打开的自定义快餐栏，可以在该组件中注入一个 MatSnackBarRef。
        </div>
        <s-button slot="action" type="text">关闭</s-button>
      </s-snackbar>
      <s-button onclick="call()">JavaScript Call</s-button>
      <s-button onclick="call2()">JavaScript Call2</s-button>
    </main>
  </s-page>
  <script type="module" src="../dist/main.js"></script>
  <script type="module" src="./scripts/default.js"></script>
  <script>
    function call() {
      customElements.get('s-snackbar').show('你好')
      document.body.firstElementChild.append('test')
    }
    function call2() {
      customElements.get('s-snackbar').show({ text: '你好', action: { text: '傻逼' } })
      document.body.firstElementChild.append('test')
    }
  </script>
</body>

</html>